import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import '../assets/css/cate.css'
import Header from '../common/header'
import { getCate, getGoods } from '../request/app'

import { SideBar } from 'antd-mobile'

export default function Cate () {
  let [info, setInfo] = useState([])
  let [tabs, setTabs] = useState([])
  function setinfo (id) {
    console.log(id)
    // 二级接口
    getGoods({ fid: id }).then(res => {
      console.log(res)
      if (res.code == 200) {
        setInfo(res.list)
      }
    })
  }

  useEffect(() => {
    // 一级接口
    getCate().then(res => {
      let obj = res.list
      if (res.code == 200) {
        setTabs(obj)
      }
    })
    // 二级接口
    setinfo(1)
  }, [])
  return (
    <div className='cate'>
      <div className='wrap'>
        <Header title={'商品分类'} />
        {/* <!-- 搜索框 --> */}
        <div className='bottom_box'>
          <div className='sousuo'>
            <input
              type='text'
              className='iconfont'
              placeholder='&#xe651; 按内容搜索'
            />
          </div>
        </div>
        {/* 左右 */}
        <div className='box'>
          <div className='left_box'>
            <SideBar
              defaultActiveKey='1'
              onChange={key => {
                setinfo(key)
              }}
            >
              {tabs.map(item => (
                <SideBar.Item key={item.id} title={item.catename} />
              ))}
            </SideBar>
          </div>

          {/* 右 */}
          <div className='right_box'>
            <div>
              <h1>热门精选</h1>

              {info.map(item => {
                return (
                  <div key={item.id}>
                    <Link to={`/detail/${item.id}`}>
                      <div className='module'>
                        <img src={item.img} alt='' />
                        <div className='text'>
                          <span>限时</span>
                          <b>{item.goodsname}</b>
                          <div className='bot'>
                            <div className='inner'>
                              <span>￥</span>
                              <span>{item.price}</span>
                              <del>￥{item.market_price}</del>
                              <p>
                                <span>{item.description}</span>
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </Link>
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
